<template>
   <div>
      <div class="Contaner">
          <div class="QueryBtn">
            <el-select v-model="searchName" placeholder="请选择" style=" width: 170px;">
              <el-option
              style="height: 30px;"
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-input v-model="searchValue" placeholder="请输入内容" style="width: 210px;margin-left: 20px;"></el-input>
              <el-button style="margin-left: 20px; height: 25px; line-height: 3px;" type="primary" @click="doSearch">查询</el-button>
          </div>
        <el-tabs type="border-card"  @tab-click="handleClick">
          <el-tab-pane label="教师查询">
              <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" height="428px" :data="tableData" style="width: 100%">
                <el-table-column label="教师头像" width="150%">
                  <template slot-scope="{}">
                      <img src="https://himg.bdimg.com/sys/portraitn/item/public.1.f9f3649._1G6_XwaCh_5jRrfn0lL6w" alt="">
                  </template>
                </el-table-column>
                 <el-table-column prop="reviewStatus" label="状态" ></el-table-column>
                <el-table-column prop="name" label="姓名" ></el-table-column>
                <el-table-column prop="subjectName" label="任教学科" ></el-table-column>
                <el-table-column prop="teacherTypeName" label="教师资格种类" ></el-table-column>
                <el-table-column prop="teacherTypeNum" label="教师资格证号" ></el-table-column>
                <el-table-column prop="reviewDate" label="申报时间" ></el-table-column>
                <el-table-column prop="auditMethod" label="审批类型" ></el-table-column>
                <el-table-column prop="Principal" label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="showLog(scope.row)" >注销</el-button>
                        <el-button style="margin-left: 7px;" type="text">更换头像</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
                <el-row
                  type="flex"
                  align="middle"
                  justify="center"
                  style="margin-top: 20px"
                >
                  <el-col :span="5">
                    <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="page.total"
                        :current-page.sync="page.currentPage"
                    ></el-pagination>
                  </el-col>
                </el-row>
          </el-tab-pane>
          <el-tab-pane label="已冻结教师">
              <el-table :header-cell-style="{ background: '#eee', color: '#606266' }" height="428px" :data="tableData" style="width: 100%">
                <el-table-column label="教师头像" width="150%">
                  <template slot-scope="{}">
                      <img src="https://himg.bdimg.com/sys/portraitn/item/public.1.f9f3649._1G6_XwaCh_5jRrfn0lL6w" alt="">
                  </template>
                </el-table-column>
                <el-table-column prop="reviewStatus" label="状态" ></el-table-column>
                <el-table-column prop="name" label="姓名" ></el-table-column>
                <el-table-column prop="subjectName" label="任教学科" ></el-table-column>
                <el-table-column prop="teacherTypeName" label="教师资格种类" ></el-table-column>
                <el-table-column prop="teacherTypeNum" label="教师资格证号" ></el-table-column>
                <el-table-column prop="reviewDate" label="申报时间" ></el-table-column>
                <el-table-column prop="auditMethod" label="审批类型" ></el-table-column>
                <el-table-column prop="Principal" label="操作" >
                    <template slot-scope="scope">
                        <el-button type="text" @click="showDelLog(scope.row)">删除</el-button>
                        <el-button style="margin-left: 7px;" type="text">再次申报</el-button>
                    </template>
                </el-table-column>
              </el-table>
              <!-- 分页 -->
                <el-row
                  type="flex"
                  align="middle"
                  justify="center"
                  style="margin-top: 20px"
                >
                  <el-col :span="5">
                   <el-pagination
                        background
                        layout="prev, pager, next"
                        :total="page.total"
                        :current-page.sync="page.currentPage"
                    ></el-pagination>
                  </el-col>
                </el-row>
          </el-tab-pane>
        </el-tabs>
      </div>
      <!-- 导出弹框
      <el-dialog title="导出数据" width="500px" :visible.sync="exportBounced">
        <div class="ExportBtn">
          <el-button type="primary">导出当前页</el-button>
          <el-button style="margin-left: 60px" type="primary"
            >导出全部数据（搜索后）</el-button
          >
        </div>
      </el-dialog> -->
       <el-dialog title="提示" :visible.sync="showDialog" width="30%" :before-close="handleClose">
        <span>是否提交注销申请</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false" style="margin-right:20px">取 消</el-button>
          <el-button type="primary" @click="cancelPoint">确 定</el-button>
        </span>
      </el-dialog>
       <el-dialog title="提示" :visible.sync="showDelDialog" width="30%" :before-close="handleClose">
        <span>是否提交注销申请</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="showDialog = false" style="margin-right:20px">取 消</el-button>
          <el-button type="primary" @click="cancelPoint">确 定</el-button>
        </span>
      </el-dialog>
   </div>
</template>

<script>
import { listTeacherReview, cancelTeacher, delTeacher } from '@/api'
import { Message } from 'element-ui'
export default {
  data () {
    return {
      exportBouncedsssss: false,
      exportBounced: false,
      exportBouncedsss: false,
      options: [{
        value: 'name',
        label: '姓名'
      }, {
        value: 'documentNum',
        label: '身份证号码'
      }, {
        value: 'teacherTypeNum',
        label: '教师资格证号'
      }, {
        value: 'servicesName',
        label: '所属机构'
      }],
      page: {
        // 分页数据
        total: 1000, // 总条数
        currentPage: 1, // 默认的页码 是第一个页  决定了当前页码是第几页
        pageSize: 9 // page-size的默认值是10条
      },
      tableData: [],
      searchName: '',
      searchValue: '',
      showDialog: false,
      showDelDialog: false,
      selectId: 0,
      selectTab: 1
    }
  },
  created () {
    this.teacherList()
  },
  methods: {
    // 当选择项发生变化时会触发该事件
    handleClick (tab, event) {
      console.log(tab.index)
      this.selectTab = parseInt(tab.index) + 1
      this.teacherList()
    },
    doSearch () {
      this.teacherList()
    },
    // 请求教学点列表数据
    async teacherList () {
      var data = { servicesId: parseInt(localStorage.getItem('platform')), status: this.selectTab }
      if (this.searchName && this.searchValue) {
        data[this.searchName] = this.searchValue
      }
      const ser = await listTeacherReview(data)
      console.log(ser)
      if (ser?.code === 200) {
        const { list, total } = ser?.data
        console.log('大数组的数据', list)
        this.tableData = list
        this.tableData.forEach(element => {
          switch (element.reviewStatus) {
            case 0:
              element.reviewStatus = '未通过'
              break
            case 1:
              element.reviewStatus = '待审核'
              break
            case 2:
              element.reviewStatus = '已通过'
              break
          }
          element.reviewDate = this.formatTime(element.reviewDate * 1000)
          switch (element.auditMethod) {
            case 1:
              element.auditMethod = '手工审批'
              break
            case 2:
              element.auditMethod = '自动校验'
              break
          }
        })
        this.page.total = total
      }
      this.exportBouncedsss = false
    },
    formatTime (item) {
      return this.$formatTime(item)
    },
    showLog (row) {
      this.selectId = row.id
      this.showDialog = true
    },
    showDelLog (row) {
      this.selectId = row.id
      this.showDelDialog = true
    },
    cancelPoint () {
      this.showDialog = false
      this.doCancel()
    },
    async doCancel () {
      Message.error('')
      var data = { id: this.selectId }
      const ser = await cancelTeacher(data)
      console.log(ser)
      if (ser?.code === 200) {
        Message.success('教学点注销申请提交成功')
        this.teacherList()
      }
    },
    delTeacher () {
      this.showDelDialog = false
      this.doDel()
    },
    async doDel () {
      Message.error('')
      var data = { id: this.selectId }
      const ser = await delTeacher(data)
      console.log(ser)
      if (ser?.code === 200) {
        Message.success('教学点注销申请提交成功')
        this.teacherList()
      }
    }
  }
}
</script>

<style lang="less" scopde>
  .Selectionsss {
    padding-top: 10px;
    padding-bottom: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left_btn {

      .el-button+.el-button {
        margin-left: 0;
    }
      }
  }
  .big_Info {
    display: flex;
    padding: 0 24px 16px;
    color: rgba(0,0,0,.85);
  }
.Top_seach {
  .tabelskc {
    display: flex;
      margin-bottom: 24px;
    .shuru {
      width: 100%;
    }
    .left_name {
      width: 180px;
      height: 32px;
      text-align: right;
      line-height: 32px;
    }
  }
      .blocksss {
      padding: 0 0 0 75px;
      margin-bottom: 24px;
    }
  .category {
    padding: 0 0 0 20px;
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    .checkboxs {
      width: 500px;
      display: flex;
      flex-wrap: wrap;
      .el-checkbox {
        margin-right: 15px;
      }
    }
  }
  p {
    margin-bottom: 10px;
    font-weight: 600;
    font-size: 20px;
    color: #000000;
  }
}
  .ExportBtn {
    width: 80%;
    margin: 0px 40px 0px;
    padding-bottom: 40px;
  }
  .el-card__body {
    padding: 0 !important;

      .el-dialog {
    margin-bottom: 0 !important;
  }

  .el-dialog__body {
    padding: 30px 20px 0;
    border-top: 1px solid #e4e4e4;
  }
  }
  .Contaner {
    position: relative;
    height: 100vh - 27;
  }
  .QueryBtn {
    display: flex;
    align-items: center;
    width: 550px;
    height: 40px;
    position: absolute;
    top: 0;
    right: 30px;
    z-index: 1;
    .el-input__suffix {
      line-height: 50px;
    }
    input {
      height: 30px;
    }
  }
</style>
